<template>
	<view>
		<page-head headTitle="订单管理" :returnButton="true" :newsy="true" @clickLeftReturn="clickLeftReturn" @clickRightNewsy="clickRightNewsy"></page-head>
		<view class="bg-white p-l-r3 p-t-b3 fixed fixed-top9 orde-pb">
			<view class="flex flex-1 bg-search search-h justify-content align-center border-r">
				<text class="iconfont icon-biaoqing search-icon"></text>
				<input class="search-width" placeholder-class="input-goods fs-g search-width" type="text" placeholder="请输入商品名称">
		    </view>
			<view class="flex height align-center fs-g">
				<view @click="tabIndex=index" class="flex-1 flex justify-content orde-r fs-g" 
				v-for="(item,index) in tabBar" :key="index" :class="tabIndex===index?'order-bj':''">
				<text class="order-text" >{{item.name}}</text>
			</view>
			</view>
		</view>
		<view class="orde-mt">
			<view class="m bg-white" v-for="(content,index) in list" v-show="tabIndex==index">
				<view class="p-l-r2">
					<view class="flex height align-center fs-3 border-botton">
						<text class="flex-1 flex justify-content">订单编号</text>
						<text class="flex-1 flex justify-content">商品名称</text>
						<text class="flex-1 flex justify-content">状态</text>
						<text class="flex-1 flex justify-content">操作</text>
					</view>
				</view>
				<view class="table">
					<view class="flex search-h align-center p-l-r2 fs-2 color-table">
						<text class="flex-1 flex justify-content">k2039393939</text>
						<text class="flex-1 flex justify-content">代金劵</text>
						<text class="flex-1 flex justify-content">待处理</text>
						<text class="flex-1 flex justify-content color-blue">查看</text>
					</view>
					<view class="flex search-h align-center p-l-r2 fs-2 color-table">
						<text class="flex-1 flex justify-content">k2039393939</text>
						<text class="flex-1 flex justify-content">代金劵</text>
						<text class="flex-1 flex justify-content">待处理</text>
						<text class="flex-1 flex justify-content color-blue">查看</text>
					</view>
					<view class="flex search-h align-center p-l-r2 fs-2 color-table">
						<text class="flex-1 flex justify-content">k2039393939</text>
						<text class="flex-1 flex justify-content">代金劵</text>
						<text class="flex-1 flex justify-content">待处理</text>
						<text class="flex-1 flex justify-content color-blue">查看</text>
					</view>
					<view class="flex search-h align-center p-l-r2 fs-2 color-table">
						<text class="flex-1 flex justify-content">k2039393939</text>
						<text class="flex-1 flex justify-content">代金劵</text>
						<text class="flex-1 flex justify-content">待处理</text>
						<text class="flex-1 flex justify-content color-blue">查看</text>
					</view>
					<view class="flex search-h align-center p-l-r2 fs-2 color-table">
						<text class="flex-1 flex justify-content">k2039393939</text>
						<text class="flex-1 flex justify-content">代金劵</text>
						<text class="flex-1 flex justify-content">待处理</text>
						<text class="flex-1 flex justify-content color-blue">查看</text>
					</view>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
	export default {
		components:{
			pageHead
		},
		data() {
			return {
				tabIndex:0,
				tabBar:[
					{name:'全部'},
					{name:'待处理'},
					{name:'已完成'},
					{name:'已取消'}
				],
				list:[
					{},
					{},
					{},
					{}
				]
			}
		},
		methods: {
			changen(index){
				this.tabIndex = index;
			},
			clickLeftReturn(){
				uni.navigateBack({
				    delta: 1
				});
			},
			clickRightNewsy(){
				
			}
		}
	}
</script>

<style scoped>
.search-icon{font-size: 60rpx;color: #AAAAAA;}
.orde-mt{margin-top: 360rpx;}
.orde-pb{padding-bottom: 0;}
</style>
